<template>
    <div>
        <Modal v-model="memberModalVisible" :mask-closable='false' :width="1140" :styles="{top: '90px'}" @on-cancel="cancel" :footer-hide="true">
            <div style="margin-top: 20px">
                <rui-page :defines="defines">
                    <Row>
                        <Form inline :label-width="90" class="search-form" style="margin-left:-50px;">
                            <Form-item label="部门" prop="deptId">
                                <Cascader v-model="selectDep" :data="department" :load-data="loadData"
                                          @on-change="handleChangeDep" change-on-select filterable
                                          placeholder="请选择或输入搜索部门" style="width: 200px;padding-top: 5px"></Cascader>
                            </Form-item>
                            <Form-item label="姓名">
                                <Input type="text" v-model="searchForm.userName" clearable placeholder="请输入关键字" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="在岗状态">
                                <Select v-model="searchForm.postStatus" placeholder="请选择" clearable style="width: 200px">
                                    <Option value="0">离岗</Option>
                                    <Option value="1">在岗</Option>
                                </Select>
                            </Form-item>
                            <Form-item style="margin-left:-45px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row style="margin-top: -5px">
                        <Button @click="save" type="primary" icon="ios-add">确定</Button>
                    </Row>
                    <rui-table :defineId="'memberInfo'"
                               :select="true"
                               @loadDatas="getUserList"
                               @on-selection-change="showSelect"
                               ref="memberInfoTable">
                    </rui-table>
                </rui-page>
            </div>
        </Modal>
    </div>
</template>
<script>
    let memberInfo = [
        {
            key: "username",
            title: "账号",
            align: 'center',
        },
        {
            key: 'userRealName',
            title: '姓名',
            align: 'center',
        },
        {
            key: 'departmentTitle',
            title: '部门',
            align: 'center',
        },
        {
            key: 'postStatus',
            title: '在岗状态',
            align: 'center',
            render: (h, params) => {
                let text = '';
                let color = '';
                let arr = params.row.postStatus;
                if(arr==="0"){
                    text = '离岗';
                    color = '';
                }else if(arr==="1"){
                    text = '在岗';
                    color = 'lightgreen';
                }else{
                    text = '离岗';
                }
                return h('Tag', {
                        props: {
                            type:"dot",
                            color: color
                        }
                    },
                    text,
                )
            }
        },
    ]
    import {getUserListData} from "@/projects/basic/api/admin/user";
    import {
        initDepartment,
        loadDepartment
    } from "@/projects/basic/api/admin/department";
    import {addMember} from "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    import {queryUserCollocation,getUserDetailsInfo} from "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    export default {
        name: "memberAdd",
        data() {
            return{
                memberModalVisible:false,
                deptId: [],
                selectDep: [],
                department: [],
                selectCount: 0,
                selectList:[],
                searchForm:{
                    pageNumber: 1,
                    pageSize: 10,
                    department:"",
                    userName:"",
                    lockFlag:"",
                    deptId:"",
                    postStatus:"",
                    approvalAuthority:"01",
                },
                memberInfo:{
                    userName:"",
                    groupId:"",
                    sysUserDtoList:[],
                }
            }
        },
        methods:{
            handleSearch(){
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getUserList(1,10);
            },
            handleReset(){
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.department ="";
                this.searchForm.userName = "";
                this.searchForm.postStatus ="";
                //重新加载数据
                this.getUserList(1,10);
            },
            memberMsg: function (msg) {
                if(msg!==""){
                    this.getUserList(1,10);
                    this.memberModalVisible = true;
                    this.memberInfo.groupId = msg;
                    this.initDepartmentData();
                }
            },
            getUserList(pageNumber, pageSize) {
                this.searchForm.pageNumber = pageNumber;
                this.searchForm.pageSize = pageSize;
                getUserDetailsInfo(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        let {records, total} = res.data;
                        this.$refs.memberInfoTable.updateTableData(records, total);
                    }
                })
            },
            initDepartmentData() {
                initDepartment().then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(function (e) {
                            if (e.isParent) {
                                e.value = e.id;
                                e.label = e.title;
                                e.loading = false;
                                e.children = [];
                            } else {
                                e.value = e.id;
                                e.label = e.title;
                            }
                            if (e.status === '0') {
                                e.label = "[已禁用] " + e.label;
                                e.disabled = true;
                            }
                        });
                        this.department = res.data;
                    }
                });
            },
            loadData(item, callback) {
                item.loading = true;
                loadDepartment(item.value).then(res => {
                    item.loading = false;
                    if (res.code === "0000") {
                        res.data.forEach(function (e) {
                            if (e.isParent) {
                                e.value = e.id;
                                e.label = e.title;
                                e.loading = false;
                                e.children = [];
                            } else {
                                e.value = e.id;
                                e.label = e.title;
                            }
                            if (e.status === '0') {
                                e.label = "[已禁用] " + e.label;
                                e.disabled = true;
                            }
                        });
                        item.children = res.data;
                        callback();
                    }
                });
            },
            handleChangeDep(value, selectedData) {
                // 获取最后一个值
                if (value && value.length > 0) {
                    this.searchForm.deptId = value[value.length - 1];
                } else {
                    this.searchForm.deptId = "";
                }
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            //保存
            save(){
                if(this.selectCount<=0){
                    this.$Message.warning("请至少勾选一项数据");
                    return;
                }
                this.memberInfo.sysUserDtoList = this.selectList;
                addMember(this.memberInfo).then(res=>{
                    if(res.code === "0000"){
                        this.selectCount = 0;
                        this.$Message.success("添加成功");
                        this.memberModalVisible = false;
                        this.$parent.refreshMember();
                    }
                })
            },
            cancel () {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.department ="";
                this.searchForm.userName = "";
                this.searchForm.postStatus ="";
                //重新加载数据
                this.getUserList(1,10);
            },
        },
        computed: {
            defines() {
                return [
                    {
                        id: 'memberInfo',
                        fields: memberInfo
                    }
                ]
            }
        }
    }
</script>
